<template>
  <div class="article-container">
    <!-- 筛选区域 -->
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表单 -->
      <!-- null, 即都不传时为全部 -->
      <el-form label-width="80px">
        <el-form-item label="状态：">
          <el-radio-group v-model="reqParams.status">
            <!-- tip: 这里的值按接口文档要求的传递 -->
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <!-- <el-radio :label="4">已删除</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <AllChannels v-model="reqParams.channel_id" />
          <!-- <el-select
            clearable
            v-model="reqParams.channel_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="dateArr"
            unlink-panels
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="getArticleList">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-table :data="articles" style="width: 100%">
      <el-table-column prop="cover" label="封面" width="140">
        <template slot-scope="scope">
          <el-image
            class="cover-covers"
            :src="scope.row.cover?.images[0]"
            fit="contain"
          >
            <div slot="error" class="image-list-err-slot">
              <img :src="imgerr" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
          <el-tag v-if="scope.row.status === 1">待审核</el-tag>
          <el-tag v-if="scope.row.status === 2" type="success">审核通过</el-tag>
          <el-tag v-if="scope.row.status === 3" type="warning">审核失败</el-tag>
          <el-tag v-if="scope.row.status === 4" type="danger">已删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
      <el-table-column prop="read_count" label="阅读数"> </el-table-column>
      <el-table-column prop="comment_count" label="评论数"> </el-table-column>
      <el-table-column prop="like_count" label="点赞数"> </el-table-column>
      <!-- 编辑 & 删除按钮 -->
      <el-table-column prop="name" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            plain
            @click="$router.push('/publish?id=' + scope.row.id)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            plain
            @click="deleteArticleHandle(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" class="table-pagination" justify="end">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 30]"
        @size-change="handleSizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </el-row>
    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
      <span>是否删除当前文章？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="_deleteArticle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getArticleList } from '@/api/article'
import imgerr from '@/assets/images/error.gif'
import { deleteArticle } from '@/api/article'

export default {
  name: 'ArticlePage',
  // props: {},
  // components: {},
  data() {
    return {
      // 请求参数对象
      reqParams: {
        // tip: 默认为 null, axios 请求时，值为 null 的字段是不会提交的
        status: null, // 状态
        channel_id: '', // 频道 id
        begin_pubdate: null, // 开始时间
        end_pubdate: null, // 结束时间
        page: 1, // 默认为第1页
        per_page: 10, // 每页数量 不传为默认10
      },
      // 频道选项
      // channelOptions: [],
      // 日期 （开始，结束时间）
      dateArr: [],
      // 表格数据
      articles: [],
      imgerr, // 图片加载错误
      total: null, // 页码总数
      dialogVisible: false, // 删除 dialog
      delArticleId: null, // 删除文章的 id
    }
  },
  // computed: {},
  // watch: {},
  // 钩子函数
  created() {
    // this._getChannels()
    this._getArticleList()
  },
  methods: {
    // @日期切换后
    dateChange(currentDate) {
      // console.log('date?', currentDate)
      this.reqParams.begin_pubdate = currentDate[0]
      this.reqParams.end_pubdate = currentDate[1]
      // console.log('当前筛选参数zhi ', this.reqParams)
    },
    // @获取所有频道
    // async _getChannels() {
    //   const [err, res] = await getAllChannels()
    //   if (err)
    //     return this.$message({
    //       type: 'error',
    //       message: '无法获取频道数据，请刷新后重试',
    //     })
    //   // console.log('频道数据', err, res)
    //   const {
    //     data: { channels },
    //   } = res
    //   this.channelOptions = channels
    // },
    // @点击筛选按钮
    getArticleList() {
      this.reqParams.page = 1
      this._getArticleList()
    },
    // @获取文章列表
    async _getArticleList() {
      const [err, res] = await getArticleList(this.reqParams)
      if (err)
        return this.$message({
          type: 'error',
          message: '无法获取列表数据，请刷新后重试',
        })
      const {
        data: { results, total_count },
      } = res
      // console.log('请求结果', err, results)
      this.articles = results
      this.total = total_count // 总页码数
    },
    /**
     * @description: 选择每页条数
     * @param {*} pageSize 当前每页页码数
     * @return {*}
     */
    handleSizeChange(pageSize) {
      this.reqParams.per_page = pageSize
      this._getArticleList()
    },
    /**
     * @description: 当前页页码修改
     * @param {*} currentPage 当前页码数
     * @return {*}
     */
    currentChange(currentPage) {
      this.reqParams.page = currentPage
      this._getArticleList()
    },
    // @删除文章
    deleteArticleHandle(articleId) {
      this.delArticleId = articleId
      this.dialogVisible = !this.dialogVisible
    },
    // 删除文章持久化
    async _deleteArticle() {
      // console.log('id?', articleId)
      const [err] = await deleteArticle(this.delArticleId)
      if (err)
        return this.$message({
          type: 'error',
          message: '删除失败，请稍后重试',
        })
      this.$message({
        type: 'success',
        message: '删除成功',
      })
      this._getArticleList()
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped lang="scss">
.article-container {
  // .el-select {
  // 多选框 100% 宽
  //   width: 100%;
  // }
  .cover-covers {
    width: 120px;
    height: 80px;
    .image-list-err-slot {
      img {
        max-width: 100%;
        object-fit: contain;
      }
    }
  }
}
</style>
